<!doctype html>
<html class="no-js">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="keywords" content="<%global.metakeyword%>">
    <meta name="description" content="<%global.metadescription%>">
    <!-- <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport" />-->
    <title>H5代码生成器</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="Cache-Control" content="no-siteapp"/>
    <link rel="stylesheet" href="assets/css/amazeui.min.css">
    <link rel="stylesheet" href="assets/css/reset.css">
    <link rel="stylesheet" href="assets/css/sweetalert2.min.css">
    <link rel="stylesheet" href="assets/css/select2.min.css">
    <link rel="stylesheet" href="assets/css/app.css">
    <link rel="stylesheet" href="http://special.zhaopin.com/dscpro/css/animate.min.css">

</head>
<body class="pos-rel my-body">

<div class="am-container">
    <div class="am-g">
        <div class="am-u-sm-3" >
            <div class="am-form">
                <fieldset>
                    <legend class="am-text-danger">配置项</legend>
                    <div class="am-form-group">
                        <h4 class="am-text-primary">h5尺寸配置</h4>
                        <p class="am-text-primary"><span style="font-size: 12px">(谨慎选择，一旦确定不可修改尺寸，如果一定要修改，请刷新浏览器)</span></p>
                        <div class="am-radio">
                            <label>
                                <input type="radio" name="applicationSystem" value="1" checked>640*1040
                            </label>
                        </div>

                        <div class="am-radio">
                            <label>
                                <input type="radio" name="applicationSystem" value="2">750*1220
                            </label>
                        </div>
                        <button id="size-sel" class="am-btn am-btn-primary am-btn-sm">确定</button>
                    </div>
                    <div class="am-form-group">
                        <h4 class="am-text-primary">h5动画库配置</h4>
                        <div class="am-radio">
                            <label>
                                <input type="radio" name="animate" value="1" checked>Velocity.js
                            </label>
                        </div>

                        <div class="am-radio">
                            <label>
                                <input type="radio" name="animate" value="2" id="animation-start">Animate.css(目前支持可选动画库)
                            </label>
                        </div>
                        <button id="size-sel1" class="am-btn am-btn-primary am-btn-sm">确定</button>
                    </div>

                    <div class="am-form-group am-form-file" id="bg-upload">
                        <label for="imgbg">背景图上传</label>
                        <div>
                            <button type="button" class="am-btn am-btn-primary am-btn-sm" disabled>
                                <i class="am-icon-cloud-upload"></i> 选择要上传的文件
                            </button>
                        </div>
                        <input type="file" class="upload-click" id="imgbg" disabled>
                    </div>
                    <div class="am-form-group am-form-file" id="pic-upload">
                        <label for="imgread">图片上传</label>
                        <div>
                            <button type="button" class="am-btn am-btn-primary am-btn-sm" disabled>
                                <i class="am-icon-cloud-upload"></i> 选择要上传的文件
                            </button>
                        </div>
                        <input type="file"  class="pic-click" multiple accept="image/*" id="imgread" disabled>
                    </div>

                    <p>
                        <button type="button" id="createHtml" class="am-btn am-btn-success">生成HTML</button>
                        <button type="button" id="clearHtml" class="am-btn am-btn-danger">重做</button>
                    </p>
                    <p class="am-margin-top">
                        <button type="button" id="preview" class="am-btn am-btn-secondary">预览</button>
                    </p>
                </fieldset>
            </div>
        </div>
        <div class="am-u-sm-9" id="editor">
            <button id="l-middle" class="am-btn am-btn-primary" style="position: absolute;top: 100px;left: 12px">居中</button>
            <div id="phone">
            </div>
            <div  class="swiper-slide" data-history="1" style="background: no-repeat center;background-size:cover ">
            </div>
            <div class="ruler ruler-hr"></div>
            <div class="ruler ruler-ve"></div>

            <div class="animation-sel"  style="display: block">
                <div class="am-form animation-sel-velocity" style="display: block">
                    <div class="am-form-group">
                        <select class="js-example-basic-single" name="state">
                            <optgroup label="常用" id="default_select_option"></optgroup>

                            <optgroup label="自定义" id="my_select_option"></optgroup>
                        </select>
                        <span class="am-form-caret"></span>
                    </div>
                    <div class="am-form-group">

                        <input type="text" class="am-form-field" id="duration" placeholder="duration">

                    </div>
                    <div class="am-form-group">

                        <input type="text" class="am-form-field" id="delay" placeholder="delay">

                    </div>
                </div>

                <div class="animation-sel-css" style="display: none" >
                    <select style="height: 37px" class="input input--dropdown js--animations">
                        <optgroup label="Attention Seekers">
                            <option value="bounce">bounce</option>
                            <option value="flash">flash</option>
                            <option value="pulse">pulse</option>
                            <option value="rubberBand">rubberBand</option>
                            <option value="shake">shake</option>
                            <option value="swing">swing</option>
                            <option value="tada">tada</option>
                            <option value="wobble">wobble</option>
                        </optgroup>

                        <optgroup label="Bouncing Entrances">
                            <option value="bounceIn">bounceIn</option>
                            <option value="bounceInDown">bounceInDown</option>
                            <option value="bounceInLeft">bounceInLeft</option>
                            <option value="bounceInRight">bounceInRight</option>
                            <option value="bounceInUp">bounceInUp</option>
                        </optgroup>

                        <optgroup label="Bouncing Exits">
                            <option value="bounceOut">bounceOut</option>
                            <option value="bounceOutDown">bounceOutDown</option>
                            <option value="bounceOutLeft">bounceOutLeft</option>
                            <option value="bounceOutRight">bounceOutRight</option>
                            <option value="bounceOutUp">bounceOutUp</option>
                        </optgroup>

                        <optgroup label="Fading Entrances">
                            <option value="fadeIn">fadeIn</option>
                            <option value="fadeInDown">fadeInDown</option>
                            <option value="fadeInDownBig">fadeInDownBig</option>
                            <option value="fadeInLeft">fadeInLeft</option>
                            <option value="fadeInLeftBig">fadeInLeftBig</option>
                            <option value="fadeInRight">fadeInRight</option>
                            <option value="fadeInRightBig">fadeInRightBig</option>
                            <option value="fadeInUp">fadeInUp</option>
                            <option value="fadeInUpBig">fadeInUpBig</option>
                        </optgroup>

                        <optgroup label="Fading Exits">
                            <option value="fadeOut">fadeOut</option>
                            <option value="fadeOutDown">fadeOutDown</option>
                            <option value="fadeOutDownBig">fadeOutDownBig</option>
                            <option value="fadeOutLeft">fadeOutLeft</option>
                            <option value="fadeOutLeftBig">fadeOutLeftBig</option>
                            <option value="fadeOutRight">fadeOutRight</option>
                            <option value="fadeOutRightBig">fadeOutRightBig</option>
                            <option value="fadeOutUp">fadeOutUp</option>
                            <option value="fadeOutUpBig">fadeOutUpBig</option>
                        </optgroup>

                        <optgroup label="Flippers">
                            <option value="flip">flip</option>
                            <option value="flipInX">flipInX</option>
                            <option value="flipInY">flipInY</option>
                            <option value="flipOutX">flipOutX</option>
                            <option value="flipOutY">flipOutY</option>
                        </optgroup>

                        <optgroup label="Lightspeed">
                            <option value="lightSpeedIn">lightSpeedIn</option>
                            <option value="lightSpeedOut">lightSpeedOut</option>
                        </optgroup>

                        <optgroup label="Rotating Entrances">
                            <option value="rotateIn">rotateIn</option>
                            <option value="rotateInDownLeft">rotateInDownLeft</option>
                            <option value="rotateInDownRight">rotateInDownRight</option>
                            <option value="rotateInUpLeft">rotateInUpLeft</option>
                            <option value="rotateInUpRight">rotateInUpRight</option>
                        </optgroup>

                        <optgroup label="Rotating Exits">
                            <option value="rotateOut">rotateOut</option>
                            <option value="rotateOutDownLeft">rotateOutDownLeft</option>
                            <option value="rotateOutDownRight">rotateOutDownRight</option>
                            <option value="rotateOutUpLeft">rotateOutUpLeft</option>
                            <option value="rotateOutUpRight">rotateOutUpRight</option>
                        </optgroup>

                        <optgroup label="Sliding Entrances">
                            <option value="slideInUp">slideInUp</option>
                            <option value="slideInDown">slideInDown</option>
                            <option value="slideInLeft">slideInLeft</option>
                            <option value="slideInRight">slideInRight</option>

                        </optgroup>
                        <optgroup label="Sliding Exits">
                            <option value="slideOutUp">slideOutUp</option>
                            <option value="slideOutDown">slideOutDown</option>
                            <option value="slideOutLeft">slideOutLeft</option>
                            <option value="slideOutRight">slideOutRight</option>

                        </optgroup>

                        <optgroup label="Zoom Entrances">
                            <option value="zoomIn">zoomIn</option>
                            <option value="zoomInDown">zoomInDown</option>
                            <option value="zoomInLeft">zoomInLeft</option>
                            <option value="zoomInRight">zoomInRight</option>
                            <option value="zoomInUp">zoomInUp</option>
                        </optgroup>

                        <optgroup label="Zoom Exits">
                            <option value="zoomOut">zoomOut</option>
                            <option value="zoomOutDown">zoomOutDown</option>
                            <option value="zoomOutLeft">zoomOutLeft</option>
                            <option value="zoomOutRight">zoomOutRight</option>
                            <option value="zoomOutUp">zoomOutUp</option>
                        </optgroup>

                        <optgroup label="Specials">
                            <option value="hinge">hinge</option>
                            <option value="rollIn">rollIn</option>
                            <option value="rollOut">rollOut</option>
                        </optgroup>
                    </select>

                    <button type="button" class="am-btn am-btn-primary js--triggerAnimation" disabled="disabled">Animate it</button>

                </div>

            </div>
        </div>
    </div>
</div>

<div class="am-modal am-modal-alert" tabindex="-1" id="my-alert">
    <div class="am-modal-dialog" >

        <div class="am-modal-bd" >
            <div class="am-form">
                <div class="am-form-group">
                    <textarea class="" rows="25" id="textarea"></textarea>
                </div>
            </div>

        </div>

    </div>
</div>

</body>
<script src="assets/js/jquery-2.0.0.min.js"></script>
<script src="assets/js/velocity.js"></script>
<script src="assets/js/velocity.ui.js"></script>
<script src="assets/js/animate.js"></script>
<script src="assets/js/amazeui.min.js"></script>
<script src="assets/js/interact.min.js"></script>
<script src="assets/js/sweetalert2.all.min.js"></script>
<script src="assets/js/select2.min.js"></script>
<script src="assets/js/h5create.js"></script>
<script>
    $('#size-sel,#size-sel1').click(function () {
        $(this).parent().find('input[type="radio"]').attr("disabled",'true');
        $(this).attr("disabled",'true');
        if($('#size-sel').attr("disabled")&&$('#size-sel1').attr("disabled")){
            $("#bg-upload").find('input,button').attr("disabled",false);
        }
    });
    $('#size-sel1').click(function () {
        if($("#animation-start").is(':checked')){
            $(".animation-sel-css").show();
            $(".animation-sel-velocity").hide();
        }
    });
    $(".upload-click").click(function () {
        $("#pic-upload").find('input,button').attr("disabled",false);
    });
    $(".pic-click").click(function () {
        $("#createHtml").attr("disabled",false);
    })
</script>
</html>


